<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['articleTitle', validatorRules.articleTittle]" placeholder="请输入标题"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="作者" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['articleAuthor', validatorRules.articleAuthor]" placeholder="请输入作者"></a-input>
            </a-form-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--              <j-date placeholder="请选择时间" v-decorator="['createTime', validatorRules.articleTime]" :trigger-change="true" style="width: 100%"/>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :span="24">
            <a-form-item label="所属栏目" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="select" v-decorator="['articleColumn', validatorRules.articleColumn]" :trigger-change="true" dictCode="column_manage" placeholder="请选择所属栏目"/>
<!--              <a-select-->
<!--                :trigger-change="true"-->
<!--                label-in-value-->
<!--                @change="handleChange"-->
<!--                v-decorator="['articleColumn', validatorRules.articleColumn]"-->
<!--                placeholder="请选择所属栏目"-->
<!--              >-->
<!--                <a-select-option v-for="i in this.columnInfo" :value="i.itemValue">-->
<!--                  {{ i.itemText}}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="是否推荐到首页" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="select" v-decorator="['isHomepage', validatorRules.isHomepage]" :trigger-change="true" dictCode="ishomepage" placeholder="请选择是否推荐到首页"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="是否栏目置顶" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="select" v-decorator="['articleColumnTop', validatorRules.isHomepage]" :trigger-change="true" dictCode="ishomepage" placeholder="请选择是否推荐到首页"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="是否作为轮播图出现" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="select" v-decorator="['articleTopRotation', validatorRules.isHomepage]" :trigger-change="true" dictCode="ishomepage" placeholder="请选择是否推荐到首页"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="是否允许评论" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="select" v-decorator="['articleEnableComment',validatorRules.articleEnableComment]" :trigger-change="true" dictCode="yn" placeholder="请选择是否允许评论"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-editor v-decorator="['articleContent',{trigger:'input'}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload  v-decorator="['articleImageString', validatorRules.articleImage]"></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@comp/jeecg/JFormContainer'
  import JDate from '@comp/jeecg/JDate'
  import JImageUpload from '@comp/jeecg/JImageUpload'
  import JDictSelectTag from "@comp/dict/JDictSelectTag"
  import JEditor from '@comp/jeecg/JEditor'

  export default {
    name: 'ArticleForm',
    components: {
      JFormContainer,
      JDate,
      JImageUpload,
      JDictSelectTag,
      JEditor,
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          articleTittle: {
            rules: [
              { required: true, message: '请输入标题!'},
            ]
          },
          articleAuthor: {
            rules: [
              { required: true, message: '请输入作者!'},
            ]
          },
          articleEnableComment: {
            rules: [
              { required: true, message: '请选择是否允许评论!'},
            ]
          },
          articleTime: {
            rules: [
              { required: true, message: '请输入时间!'},
            ]
          },
          articleColumn: {
            rules: [
              { required: true, message: '请输入所属栏目!'},
            ]
          },
          isHomepage: {
            rules: [
              { required: true, message: '请输入是否推荐到首页!'},
            ]
          },
          articleContent: {
            rules: [
              { required: true, message: '请输入内容!'},
            ]
          },
          articleImage: {
            rules: [
              { required: true, message: '请输入图片!'},
            ]
          },
        },
        url: {
          add: "/phil/article/add",
          edit: "/phil/article/edit",
          queryById: "/phil/article/queryById"
        },
        columnInfo:[],
        chooseColumn : ''
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      let that = this
      let url = window._CONFIG['domianURL']+'/columnManager/query'
      getAction(url).then(res=>{
        console.log(res)
        that.columnInfo = res.result
      })
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      handleChange(value) {
        console.log(value.key)
        // console.log(value.label.trim())
        this.chooseColumn = value.key
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'articleColumn','articleColumnTop','articleTopRotation','articleEnableComment','articleTitle','articleAuthor','isHomepage','articleContent','articleImageString'))
        })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          console.log(values)
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'articleColumn','articleColumnTop','articleTopRotation','articleEnableComment','articleTitle','articleAuthor','isHomepage','articleContent','articleImageString'))
      },
    }
  }
</script>